<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>视频上面的按钮</title>
    <link rel="stylesheet" type="text/css" href="./../../css/video.css" />
    <style>
    .yanse {
      position: absolute;
      height: 4px;
      background-color: red;
      z-index: 0;
      top: 0px;
    }
    .jindutiao1 {
      position: relative;
      z-index: 23;
      height: 4px;
      background: #dedede;
    }
    .video{
      padding: 0px 40px;
    }
    .back1 {
      width: 15px !important;
      height: 15px !important;
      display: inline;
      z-index: 30;
      position: absolute;
      top: 2px;
      left: 10px;
      z-index: 10;
    }
    .suoding{
      z-index:30;
      position: absolute;
      top:50%;
      left:10px;
      width:30px;
      height: 30px;
      margin-top:-15px;
    }
    </style>
</head>

<body>
    <div id="vm">
        <!-- <img src="../../image/jiantou.png" class="back1" alt="" @click="back()"> -->
        <div class="video test">
            <div class="jindutiao1" id="mask" ref="mask">
              <span class="yanse"  :style="'width:'+ width2+'%;'"></span>
              <input type="range" min="0" max="100" step="1" ref="bar" id="bar" v-bind:value='jinduwidth'  @change="rangech()" @touchstart="touchstarta($event)" @touchmove="touchmovea($event)" @touchend="touchenda($event)">
            </div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var startX = startY = endX =endY =0;
    var vm = new Vue({
        el: '#vm',
        data: {
            width2:50,
        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            }
        },
        computed: {
          jinduwidth:function () {
            return this.width2
          }
        },
        methods: {
            init: function() {
            },
            back(){
              console.log(99)
              api.sendEvent({
                  name: 'qiehuanfullscreen1',
              });
            },
            rangech:function(event) {
              this.width2 = this.$refs.bar.value;
              if (this.width2>=100) {
                this.width2=100
              }
              this.setbeisu(this.width2)
            },
            touchstarta:function(event) {
              var touch = event.targetTouches[0];
              // 滑动起点的坐标
              startX = touch.pageX;
              this.width2 = (startX-this.$refs.mask.offsetLeft)*100/(this.$refs.mask.offsetWidth);
              if (this.width2>=100) {
                this.width2=100
              }
            },
            touchmovea:function(event) {
                var touch = event.targetTouches[0];
                 endX = touch.pageX;
                  this.width2 = (endX-this.$refs.mask.offsetLeft)*100/(this.$refs.mask.offsetWidth);
                  if (this.width2>=100) {
                    this.width2=100
                  }
            },
            touchenda:function(event) {
                  var distanceX = endX - startX;
                  this.width2 = (endX-this.$refs.mask.offsetLeft)*100/(this.$refs.mask.offsetWidth);;
                  if (this.width2>=100) {
                    this.width2=100
                  }
                  this.isflagtuo = false
                  this.setbeisu(this.width2)
            },
            setbeisu:function(ret) {
                  if (ret>50) {
                    ret = parseFloat(1+0.5*(ret-50)/50).toFixed(1)
                  }else if (ret<50) {
                    ret = parseFloat(1-0.5*(50-ret)/50).toFixed(1)
                  }else if(ret>=100){
                    ret=1.5
                  }else if(ret<=0) {
                    ret =0.5
                  }else {
                    ret = 1
                  }
                  api.sendEvent({
                      name: 'setbeisu',
                      extra: {
                          videobeisu:ret,
                      }
                  });
            }
        }
    })
</script>

</html>
